<template>
  <div>
    <div class="search-content">
      <el-form ref="searchForm" :inline="true" :model="searchContent">
        <el-form-item label="店铺ID：" prop="store_id">
          <el-input class="search-content-input" v-model="searchContent.store_id" placeholder="店铺ID"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称：" prop="store_name">
          <el-input class="search-content-input" v-model="searchContent.store_name" placeholder="店铺名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="resetSearchData">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="search-list">
      <el-table  :data="items" :span-method="arraySpanMethod" border :height="oHeight" :fit="true" style="width: 100%;">
        <el-table-column align="center" prop="id" label="ID" min-width="30"></el-table-column>
        <el-table-column align="center" prop="store_id" label="店铺ID" min-width="30"></el-table-column>
        <el-table-column align="center" prop="store_name" label="店铺名称" min-width="60"></el-table-column>
        <el-table-column align="center" prop="robot_id" label="机器人ID" min-width="30"></el-table-column>
        <el-table-column align="center" prop="robot_name" label="机器人名称" min-width="60"></el-table-column>
        <el-table-column align="center" label="规则明细" min-width="60">
          <el-table-column prop="keyword" label="评价标准或关键字" >
          </el-table-column>
          <el-table-column prop="des" label="关键字描述" >
          </el-table-column>
          <el-table-column prop="score" label="分值" width="100">
          </el-table-column>
          <el-table-column prop="range" label="检测范围" width="100">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="deploy_state" label="状态" min-width="40">
          <template #default="{row}">
            <span v-if="row.deploy_state==0" style="color: red">待配置</span>
            <span v-else>已配置</span>
          </template>

        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" min-width="30">
          <template #default="{row}">
            <span @click="pass(row.robot_id)" style="color: #5790bb">通过</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <!--分页部分-->
        <div class="paginationOne">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchContent.currentPage" :page-sizes="[10, 20, 50, 100]"
            :page-size="searchContent.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total * 1">
          </el-pagination>
        </div>
      </div>
    </div>
    <edit-drawer ref="editDrawer"></edit-drawer>
  </div>
</template>
<script>
  import { resize } from "@/common/js/height.js";
  import editDrawer from "./add-drawer";
  import { dateFormatter, objScreen } from "@/common/js/util";
  export default {
    components: { editDrawer },
    data() {
      return {
        robot_item: {},
        goodsList: [],
        oHeight: 800,
        scenarioslist: [],
        searchContent: {
          currentPage: 1,
          pageSize: localStorage.getItem("pageSize") * 1 || 10,
          store_id: "",
          store_name: "",
        },
        searchObj: {},
        total: 0,
        arr: [],
        items: [],
      };
    },
    created() {
      this.getListData();
    },
    methods: {
      search() {
        this.searchContent.currentPage = 1;
        let { store_id, store_name } = this.searchContent;
        this.searchObj = objScreen({
          store_id,
          store_name,
        });
        this.getListData();
      },

      getListData() {
        var data = this.searchObj;
        data.currentPage = this.searchContent.currentPage;
        data.eachNum = this.searchContent.pageSize;
        this.$http
          .post(
            "/admin/dataService/index.php?act=qualityIntelligent&op=ruleConf",
            data
          )
          .then((res) => {
            if (res.code === 0) {
              this.total = res.data.totalCount;
              this.goodsList = res.data.list;
              this.dealTableData(res.data.list)
            } else {
              this.total = 0;
              this.goodsList = [];
              this._message("error", res.msg);
            }
          })
          .catch((err) => {
            this._message("error", err);
          });
      },
      dealTableData: function (list) {
        let that = this;
        let arr = [];
        let s = 0;
        let getTable = []; // 存储新表格数据
        list.forEach((v, index, data) => {
          if (arr.length) {
            s = arr[arr.length - 1].row + data[index - 1].rules.length; //第一次从第0行开始合并，第二次合并的开始位置是第一次的位置加上合并的行数
          }
          arr.push({
            row: s,
            index: v.rules.length, //每次合并几行
          });

          v.rules.forEach((dataV, dataIndex) => {
            v.rules[dataIndex].robot_id = v.robot_id;
            v.rules[dataIndex].robot_name = v.robot_name;
            v.rules[dataIndex].store_id = v.store_id;
            v.rules[dataIndex].store_name = v.store_name;
            v.rules[dataIndex].id = v.id;
            getTable.push(v.rules[dataIndex]);
          });
        });
        this.arr = arr;
        this.items = getTable;
        console.log(this.items)
        that.$forceUpdate();
      }, // 合并表格方法
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 1 ||columnIndex === 2 ||columnIndex === 3 || columnIndex === 10) {
          let obj = [0, 0];
          this.arr.forEach((v) => {
            if (rowIndex === v.row) {
              obj = [v.index, 1];
            } else
              return {
                rowspan: 1,
                colspan: 1,
              };
          });

          return obj;
        }
      },
      pass: function (robot_id) {
        let that = this;
       let data = {
          robot_id
        }
        this.$confirm("确定通过").then(res => {
          that.$http
            .post(
              "/admin/dataService/index.php?act=qualityIntelligent&op=approveRuleConf",
              data
            )
            .then((res) => {
              if (res.code === 0) {
                this.$message.success(res.msg);
              } else {
                this.$message.warning(res.msg);
              }        this.getListData();

            })
            .catch((err) => {
              this._message("error", err);
            });
        })
      },
      resetSearchData() {
        this.$refs["searchForm"].resetFields();
        this.searchObj = {};
        this.getListData();
      },

      handleSizeChange(pageSize) {
        localStorage.setItem("pageSize", pageSize);
        this.searchContent.pageSize = pageSize;
        this.searchContent.currentPage = 1;
        this.getListData();
      },
      handleCurrentChange(page) {
        this.searchContent.currentPage = page;
        this.getListData();
      },
      delContent(row) {
        alert("删除");
      },
    },
    mounted() {
      resize(this);
    },
  };
</script>
<style lang="scss" scoped>
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .search-content-input {
    width: 200px;
  }
</style>